<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>免费注册京东会员</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="icon" href="img/京东-01.png">
    <style>
        .top {
            width: 100%;
            height: 60px;
            background-color: #83cbac;
        }

        .top span {
            height: 60px;
            line-height: 60px;
            float: left;
            margin-left: 100px;
            font-size: 16px;
        }

        .top ul {
            float: right;
            width: 1000px;
            height: 60px;
            line-height: 60px;
        }

        .top li {
            float: left;
            width: 200px;
            height: 60px;
            text-align: center;
            font-size: 16px;
        }

        .top ul a {
            float: left;
            width: 200px;
            height: 60px;
        }

        .top ul a:hover li {
            background-color: #1a6840;
            color: white;
        }

        form {
            margin-left: 534px;
            margin-top: 50px;
            height: 400px;
        }

        td:first-child {
            text-align: right;
        }

        .dibu {
            height: 85px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
            padding-top: 20px;
            margin-top: 42px;
        }
        
    </style>
</head>

<body>
    <div class="top">
        <span style="cursor: pointer;">京东</span>
        <ul>
            <a href="登录.html">
                <li>登录</li>
            </a>
            <a href="注册.html">
                <li>注册</li>
            </a>
            <a href="我的订单.html">
                <li>我的订单</li>
            </a>
            <a href="我的京东.html">
                <li>我的京东</li>
            </a>
            <a href="list.html">
                <li>商品列表</li>
            </a>
        </ul>
    </div>
    <form action="">
        <table align="center">
            <caption>
                <h2 style="margin-bottom: 20px;margin-top: 20px;">个人注册</h2>
            </caption>
            <tr>
                <td></td>
                <td><input type="text" name="username"  style="margin-bottom: 20px;height: 20px; padding: 4px;width: 200px;" placeholder="请输入你想注册的账号"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="password" name="password"  style="margin-bottom: 20px;height: 20px; padding: 4px;width: 200px" placeholder="请输入你想注册的密码"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="password" name="repass"  style="margin-bottom: 20px;height: 20px; padding: 4px;width: 200px" placeholder="请再此输入你的密码"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="text" name="nickname"  style="margin-bottom: 20px;height: 20px; padding: 4px;width: 200px" placeholder="请输入你想注册的昵称"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" style="width: 172px;height: 30px;background-color: #e4393c;color: white;border: 2px solid #e4393c;width: 212px;"></td>
                <td></td>
            </tr>
        </table>
    </form>
    <div class="dibu">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
</body>
<script>
    var span = document.querySelector('.top span')
    span.onclick = function () {
        location.href = '首页.html'
    }
    var form = document.querySelector('form')
    var usernameInput = document.querySelector('[name="username"]')
    var passwordInput = document.querySelector('[name = "password"]')
    var repassInput = document.querySelector('[name = "repass"]')
    var nicknameInput = document.querySelector('[name = nickname]')
    form.addEventListener('submit', onsubmit)
    function onsubmit() {
        var usernameReg = /^[a-z0-9]\w{4,11}$/
        window.event.returnValue = false
        if (!usernameReg.test(usernameInput.value)) {
            alert('用户名不符合规则')
            return false
        }
        var passwordReg = /\w{6,12}/
        if (!passwordReg.test(passwordInput.value)) {
            alert('密码不符合规则')
            return false
        }
        if (repassInput.value != passwordInput.value) {
            alert('两次密码不一致')
            return false
        }
        if (nicknameInput.value.trim() === '') {
            alert('昵称不能为空')
            return false
        }
        var xhr = new XMLHttpRequest;
        xhr.open('post', 'http://localhost:8888/users/register');
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(`username=${usernameInput.value}&password=${passwordInput.value}&rpassword=${repassInput.value}&nickname=${nicknameInput.value}`)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                    var { code, message } = res
                    if (code === 1) {
                        alert(message)
                        location.href = "登录.html"
                    } else {
                        alert(message)
                    }
                }
            }
        }
    }
</script>

</html>